<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div @click="goWen" class="m1280 f f-a-c f-w-w f-j-b" style="margin-bottom: 50px">
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/01@2x.png" class="imgOne" alt="" /><i>Help & Support</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/02@2x.png" class="imgOne" alt="" /><i>Trust & Safety</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/03@2x.png" class="imgOne" alt="" /><i>Xpert Guide</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/04@2x.png" class="imgOne" alt="" /><i>KnowClub Guide</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/05@2x.png" class="imgOne" alt="" /><i>Our Story</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/06@2x.png" class="imgOne" alt="" /><i>Career</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/07@2x.png" class="imgOne" alt="" /><i>Investor</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/08@2x.png" class="imgOne" alt="" /><i>Press & News</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/09@2x.png" class="imgOne" alt="" /><i>Terms of Service</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/10@2x.png" class="imgOne" alt="" /><i>Privacy Policy</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/11@2x.png" class="imgOne" alt="" /><i>Business Solutions</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/12@2x.png" class="imgOne" alt="" /><i>Enterprise plan</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/13@2x.png" class="imgOne" alt="" /><i>Partnership</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/14@2x.png" class="imgOne" alt="" /><i>Invite a Friend</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/15@2x.png" class="imgOne" alt="" /><i>Events</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/16@2x.png" class="imgOne" alt="" /><i>Blog</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/17@2x.png" class="imgOne" alt="" /><i>Podcast</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
			<div class="titl f f-d-c f-j-c">
				<div class="img f f-a-c"><img src="/src/assets/sysIcon/18@2x.png" class="imgOne" alt="" /><i>FAQ</i></div>
				<div class="count">This is a text introduction This is a text introduction This is a text introduction</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const goWen = () => {
		router.push("/BlogFAQ");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	.titl {
		width: 408px;
		height: 216px;
		background: #f7f7f9;
		border-radius: 16px;
		padding: 0 48px;
		margin-bottom: 48px;
		cursor: pointer;
		.img {
			margin-bottom: 15px;
			.imgOne {
				width: 32px;
				height: 32px;
			}
			i {
				font-size: 20px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #02102e;
			}
		}
		.count {
			font-size: 16px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			line-height: 1.5;
			color: #8590a1;
		}
	}
</style>
